<template>
  <section class="content">
    <Panel :expandable="false" :expanded="true" color="#67C23A">
      <template slot="title">跨境申报查询</template>
      <template slot="body">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="订单申报" name="first">
            <el-form class="search-form">
              <el-row>
                <el-col :span="10">
                  <el-input placeholder="请输入内容" v-model="param.orderNo" class="input-with-select" style="width:540px; margin-bottom: 16px;">
                    <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 140px;">
                      <el-option label="订单编号" value="1"></el-option>
                      <el-option label="支付流水号" value="2"></el-option>
                    </el-select>
                  </el-input>
                  <el-form-item label="订单申报状态:" :label-width="labelWidth" style="width: 540px;">
                    <el-select v-model="param.status" class="select-item-bix" placeholder="请选择店铺账号" style="width: 100%">
                      <el-option label="全部" value="-1"></el-option>
                      <el-option label="异常回执" value="0"></el-option>
                      <el-option label="申报提交中" value="1"></el-option>
                      <el-option label="发送海关成功" value="2"></el-option>
                      <el-option label="海关退单" value="100"></el-option>
                      <el-option label="海关入库" value="120"></el-option>
                      <el-option label="实货放行" value="800"></el-option>
                      <el-option label="结关" value="899"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1" style="margin-left: 10px;">
                  <el-form-item label="订单日期:" :label-width="labelWidth">
                    <el-date-picker
                      v-model="param.dateRange1"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      class="full-cell"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      style="width: 420px !important;">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="订单申报日期:" :label-width="labelWidth">
                    <el-date-picker
                      v-model="param.dateRange2"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      class="full-cell"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      style="width: 420px !important;">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="2" :offset="1">
                  <el-button type="success" style="margin-top: 60px" @click="handleSearch">搜索</el-button>
                </el-col>
              </el-row>
            </el-form>

          </el-tab-pane>
          <el-tab-pane label="收款单申报" name="second">
            <el-form class="search-form">
              <el-row>
                <el-col :span="10">
                  <el-input placeholder="请输入内容" v-model="receiptParam.orderNo" class="input-with-select" style="width:540px; margin-bottom: 16px;">
                    <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 140px;">
                      <el-option label="订单编号" value="1"></el-option>
                      <el-option label="支付流水号" value="2"></el-option>
                    </el-select>
                  </el-input>
                  <el-form-item label="收款申报状态:" :label-width="labelWidth" style="width: 540px;">
                    <el-select v-model="receiptParam.status" class="select-item-bix" placeholder="请选择店铺账号" style="width: 100%">
                      <el-option label="全部" value="-1"></el-option>
                      <el-option label="异常回执" value="0"></el-option>
                      <el-option label="申报提交中" value="1"></el-option>
                      <el-option label="发送海关成功" value="2"></el-option>
                      <el-option label="海关退单" value="100"></el-option>
                      <el-option label="海关入库" value="120"></el-option>
                      <el-option label="实货放行" value="800"></el-option>
                      <el-option label="结关" value="899"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1" style="margin-left: 10px;">
                  <el-form-item label="订单日期:" :label-width="labelWidth">
                    <el-date-picker
                      v-model="receiptParam.dateRange1"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      class="full-cell"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      style="width: 420px !important;">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="收款单申报日期:" :label-width="labelWidth">
                    <el-date-picker
                      v-model="receiptParam.dateRange2"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      class="full-cell"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      style="width: 420px !important;">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="2" :offset="1">
                  <el-button type="success" style="margin-top: 60px" @click="handleSearch">搜索</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!--<el-tab-pane label="消息推送" name="push">-->
            <!--<el-form class="search-form">-->
              <!--<el-row>-->
                <!--<el-col :span="10">-->
                  <!--<el-input placeholder="请输入内容" v-model="pushParam.orderNo" class="input-with-select" style="width:540px; margin-bottom: 16px;">-->
                    <!--<el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 140px;">-->
                      <!--<el-option label="订单编号" value="1"></el-option>-->
                      <!--<el-option label="支付流水号" value="2"></el-option>-->
                    <!--</el-select>-->
                  <!--</el-input>-->
                  <!--<el-form-item label="信息推送状态:" :label-width="labelWidth" style="width: 540px;">-->
                    <!--<el-select v-model="pushParam.status" class="select-item-bix" placeholder="请选择店铺账号" style="width: 100%">-->
                      <!--<el-option label="全部" value="-1"></el-option>-->
                      <!--<el-option label="未推送" value="0"></el-option>-->
                      <!--<el-option label="推送成功" value="200"></el-option>-->
                      <!--<el-option label="推送失败" value="500"></el-option>-->
                    <!--</el-select>-->
                  <!--</el-form-item>-->
                  <!--<el-form-item label="物流渠道:" :label-width="labelWidth" style="width: 540px;">-->
                    <!--<el-select v-model="pushParam.logistics" class="select-item-bix" placeholder="请选择物流渠道" style="width: 100%">-->
                      <!--<el-option label="全部" value="-1"></el-option>-->
                      <!--<el-option-->
                        <!--v-for="item in logisticsList"-->
                        <!--:key="item.id"-->
                        <!--:label="item.codeValue"-->
                        <!--:value="item.code">-->
                      <!--</el-option>-->
                    <!--</el-select>-->
                  <!--</el-form-item>-->
                <!--</el-col>-->
                <!--<el-col :span="10" :offset="1" style="margin-left: 10px;">-->
                  <!--<el-form-item label="订单日期:" :label-width="labelWidth">-->
                    <!--<el-date-picker-->
                      <!--v-model="pushParam.dateRange1"-->
                      <!--value-format="yyyy-MM-dd HH:mm:ss"-->
                      <!--class="full-cell"-->
                      <!--type="datetimerange"-->
                      <!--range-separator="至"-->
                      <!--start-placeholder="开始日期"-->
                      <!--end-placeholder="结束日期"-->
                      <!--style="width: 420px !important;">-->
                    <!--</el-date-picker>-->
                  <!--</el-form-item>-->
                  <!--<el-form-item label="消息推送日期:" :label-width="labelWidth">-->
                    <!--<el-date-picker-->
                      <!--v-model="pushParam.dateRange2"-->
                      <!--value-format="yyyy-MM-dd HH:mm:ss"-->
                      <!--class="full-cell"-->
                      <!--type="datetimerange"-->
                      <!--range-separator="至"-->
                      <!--start-placeholder="开始日期"-->
                      <!--end-placeholder="结束日期"-->
                      <!--style="width: 420px !important;">-->
                    <!--</el-date-picker>-->
                  <!--</el-form-item>-->
                <!--</el-col>-->
                <!--<el-col :span="2" :offset="1">-->
                  <!--<el-button type="success" style="margin-top: 60px" @click="handleSearch">搜索</el-button>-->
                <!--</el-col>-->
              <!--</el-row>-->
            <!--</el-form>-->
          <!--</el-tab-pane>-->
        </el-tabs>
        <div style="position:absolute;top:61px;right:20px;z-index:100;">
          <el-button type="primary" style="background-color: #409EFF" @click="visible=true">跨境申报申请</el-button>
          <!--<el-button type="primary" style="background-color: #409EFF" @click="handleSend">推送消息</el-button>-->
        </div>
      </template>
    </Panel>

    <Panel :expandable="false" :expanded="true" :hasTitle="false">
      <template slot="body">
        <el-table :data="list" header-row-class-name="header-class" style="font-size: 12px;" :key="Math.random()">
          <el-table-column
            align="center"
            prop="orderNo"
            label="订单编号">
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="订单日期">
          </el-table-column>
          <el-table-column
            align="center"
            prop="orderApplyTime"
            label="订单申报日期">
          </el-table-column>
          <el-table-column
            align="center"
            prop="txNo"
            label="支付流水号">
          </el-table-column>
          <el-table-column
            align="center"
            prop="receiptApplyTime"
            label="收款单申报日期">
          </el-table-column>
          <el-table-column
            align="center"
            prop="logistics"
            label="物流渠道">
          </el-table-column>
          <!--<el-table-column-->
            <!--align="center"-->
            <!--prop="infoSendTime"-->
            <!--label="信息推送日期">-->
          <!--</el-table-column>-->
          <el-table-column
            align="center"
            prop="orderApplyStatus"
            label="订单申报状态">
            <template slot-scope="scope">
              <span v-if="scope.row.orderApplyStatus === '0'" style="color: #F56C6C">异常回执</span>
              <span v-if="scope.row.orderApplyStatus === '1'" style="color: #67C23A">申报提交中</span>
              <span v-if="scope.row.orderApplyStatus === '2'" style="color: #67C23A">发送海关成功</span>
              <span v-if="scope.row.orderApplyStatus === '100'" style="color: #FE6D04">海关退单</span>
              <span v-if="scope.row.orderApplyStatus === '120'" style="color: #4F992A">海关入库</span>
              <span v-if="scope.row.orderApplyStatus === '800'" style="color: #2F760C">实货放行</span>
              <span v-if="scope.row.orderApplyStatus === '899'" style="color: #274E14">结关</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="orderApplyError"
            label="订单申报异常信息">
          </el-table-column>
          <el-table-column
            align="center"
            prop="receiptApplyStatus"
            label="收款单申报状态">
            <template slot-scope="scope">
              <span v-if="scope.row.receiptApplyStatus === '0'" style="color: #F56C6C">异常回执</span>
              <span v-if="scope.row.receiptApplyStatus === '1'" style="color: #67C23A">申报提交中</span>
              <span v-if="scope.row.receiptApplyStatus === '2'" style="color: #67C23A">发送海关成功</span>
              <span v-if="scope.row.receiptApplyStatus === '100'" style="color: #FE6D04">海关退单</span>
              <span v-if="scope.row.receiptApplyStatus === '120'" style="color: #4F992A">海关入库</span>
              <span v-if="scope.row.receiptApplyStatus === '800'" style="color: #2F760C">实货放行</span>
              <span v-if="scope.row.receiptApplyStatus === '899'" style="color: #274E14">结关</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="receiptApplyError"
            label="收款单申报异常信息">
          </el-table-column>
          <!--<el-table-column-->
            <!--align="center"-->
            <!--prop="infoSendStatus"-->
            <!--label="信息推送状态">-->
            <!--<template slot-scope="scope">-->
              <!--<span v-if="scope.row.infoSendStatus === '200'">推送成功</span>-->
              <!--<span v-if="scope.row.infoSendStatus === '500'">推送失败</span>-->
              <!--<span v-if="scope.row.infoSendStatus === '0'">未推送</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column-->
            <!--align="center"-->
            <!--prop="infoSendError"-->
            <!--label="信息推送异常信息">-->
          <!--</el-table-column>-->
          <el-table-column
            align="center"
            prop="orderNo"
            label="操作" style="margin-right: 20px;">
            <template slot-scope="scope">


              <p style="display: inline-block ; margin-right: 8px" v-if="scope.row.orderApplyStatus === '0' || scope.row.receiptApplyStatus === '0' || scope.row.orderApplyStatus === '100' || scope.row.receiptApplyStatus === '100'">
                <a @click="viewOrderDdit(scope.row)">
                  <img src="../../assets/edite.png" alt="" style="display: inline-block;width: 18px;height: 18px;vertical-align: baseline;
position: relative;top: 2px;">
                </a>
                <!--<p v-else style="width: 18px"></p>-->
              </p>
              <p style="display: inline-block ; margin-right: 25px" v-else>&nbsp;</p>
              <p  style="display: inline-block">

                <a @click="viewOrderDetail(scope.row.orderNo)" v-if="$_has('sys:order:get')">
                  <img src="../../assets/look.png" alt="" style="display: inline-block;width: 18px;height: 18px;vertical-align: baseline;
position: relative;top: 2px;">
                </a>
              </p>
            </template>
          </el-table-column>
        </el-table>

        <div class="clear-fix">
          <el-pagination
              style="float: right; margin-top: 20px;"
              background
              layout="total,prev, pager, next"
              :total="searchParam.total"
              :pager-count="7"
              :current-page.sync="searchParam.page"
               @current-change="handleCurrentChange"
              >
          </el-pagination>
        </div>
      </template>
    </Panel>

    <el-dialog title="跨境申报申请" :visible.sync="visible" width="80%">
      <Border v-if="visible" @commited="handleCommited" :declareType="activeName"></Border>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
  import instance from '@/api/index.js'
  import Panel from '@/components/common/panel'
  import Border from './border'

  export default {
    name: "customsDeclaration",
    data() {
      return {
        labelWidth: '140px',
        param: {
          declareType: '1',
          orderNo: '',
          orderStart: '',
          orderEnd: '',
          status: '-1',
          start: '',
          end: '',
          dateRange1: [],
          dateRange2: []
        },
        receiptParam: {
          declareType: '2',
          orderNo: '',
          orderStart: '',
          orderEnd: '',
          status: '-1',
          start: '',
          end: '',
          dateRange1: [],
          dateRange2: []
        },
        pushParam: {
          declareType: '3',
          orderNo: '',
          orderStart: '',
          orderEnd: '',
          status: '-1',
          start: '',
          end: '',
          logistics: '-1',
          dateRange1: [],
          dateRange2: []
        },
        searchParam: {
          page: 1,
          rows: 10,
          total: 0
        },
        receiptSearchParam: {
          page: 1,
          rows: 10,
          total: 0
        },
        pushSearchParam: {
          page: 1,
          rows: 10,
          total: 0
        },
        dateRange: [],
        list: [],
        select:'1',
        declareList: [],
        activeName: 'first',
        visible: false,
        logisticsList: [],
      }
    },
    methods: {
      //获取物流渠道列表
      //确认发货页面
      confirmOutGoods: function (id) {
        let vm = this;
        instance({
          method: 'get',
          url: '/v1/dict/logistics'
        }).then(function (data) {
          if (data.data.success) {
            vm.logisticsList = data.data.data;
          }
        })
      },
      handleSend() {
        instance({
          method: 'post',
          url: '/v1/9610/info/send'
        }).then(function (data) {
          console.log('--------------')
          console.log(data)
        });
      },
      handleClick(tab, event) {
        console.log(this.activeName);
        console.log(tab, event);
        this.list = [];
        this.receiptSearchParam = {
          page: 1,
          rows: 10,
          total: 0
        }
        this.searchParam = {
          page: 1,
          rows: 10,
          total: 0
        }
        this.pushSearchParam = {
          page: 1,
          rows: 10,
          total: 0
        }
        this.getDeclareList();
      },
      handleSearch() {
        this.searchParam.page = 1;
        this.getDeclareList();
      },
      //报关单列表获取
      getDeclareList: function () {
        let vm = this;
        let param = {
          declareType: '1',
          orderNo: this.param.orderNo,
          status: this.param.status === '-1' ? null: this.param.status,
          page: this.searchParam.page,
          rows: this.searchParam.rows
        };
        if(this.param.dateRange1){
          param.orderStart = this.param.dateRange1[0];
          param.orderEnd = this.param.dateRange1[1];
        }
        if(this.param.dateRange2){
          param.start = this.param.dateRange2[0];
          param.end = this.param.dateRange2[1];
        }

        console.log(this.activeName)
        if(this.activeName === 'second'){
          param = {
            declareType: '2',
            orderNo: this.receiptParam.orderNo,
            status: this.receiptParam.status === '-1'? null: this.receiptParam.status,
            page: this.receiptSearchParam.page,
            rows: this.receiptSearchParam.rows
          };
          if(this.receiptParam.dateRange1){
            param.orderStart = this.receiptParam.dateRange1[0];
            param.orderEnd = this.receiptParam.dateRange1[1];
          }
          if(this.receiptParam.dateRange2){
            param.start = this.receiptParam.dateRange2[0];
            param.end = this.receiptParam.dateRange2[1];
          }
        } else if(this.activeName === 'push'){
          param = {
            declareType: '3',
            orderNo: this.pushParam.orderNo,
            status: this.pushParam.status === '-1'? null: this.pushParam.status,
            logistics: this.pushParam.logistics === '-1'?null: this.pushParam.logistics,
            page: this.pushSearchParam.page,
            rows: this.pushSearchParam.rows
          };
          if(this.pushParam.dateRange1){
            param.orderStart = this.pushParam.dateRange1[0];
            param.orderEnd = this.pushParam.dateRange1[1];
          }
          if(this.pushParam.dateRange2){
            param.start = this.pushParam.dateRange2[0];
            param.end = this.pushParam.dateRange2[1];
          }
        }

        instance({
          method: 'post',
          url: '/v1/9610/declare',
          data: param
        }).then(function (data) {
          vm.list = data.data.data.list;
          vm.searchParam.total = data.data.data.total;
        });
      },

      // 提交完成
      handleCommited(msg) {
        this.visible = false;
        if(msg === false) {
          // do nothing
        } else {
          this.$message.success(msg || "操作成功！");
        }
        this.handleSearch();
      },

      handleCurrentChange(page) {
        this.searchParam.page = page;
        this.receiptSearchParam.page = page;
        this.pushSearchParam.page = page;
        this.getDeclareList();
      },
      viewOrderDdit(row){
        let type = 3;
        if(row.orderApplyStatus === '0' && row.receiptApplyStatus === '0'){
          type = 1;
        }else if(row.orderApplyStatus === '0'){
          type = 2;
        }else if(row.orderApplyStatus === '100' && row.receiptApplyStatus === '100'){
          type = 1;
        }else if(row.orderApplyStatus === '100'){
          type = 2;
        }
        let id = row.orderNo;
        this.$router.push(`/v1/declare/crossBorder/query/create?orderId=${id}&orderType=${type}`)
      },

      //查看订单详情
      viewOrderDetail: function (id) {
        this.$router.push(`/v1/declare/crossBorder/detail?orderId=${id}`)
        /*  let vm = this;
          vm.showFlag = false;
          vm.modalTitle = "订单详情"; //模态框title
          vm.getOrderDetail(id);*/
      },
    },
    created() {
      this.getDeclareList();
      this.confirmOutGoods();
    },
    components: {
      Panel,
      Border
    }
  }
</script>

<style>
.search-form .el-form-item__label{
  font-weight: 400;
}

.search-form .el-form-item {
  margin-bottom: 16px;
}

.search-form .el-range-input {
  text-align: left;
}

.error-dialog .el-dialog__header {
  border-bottom: 1px solid #E4E7ED;
}

.error-dialog .el-dialog__header .el-dialog__title {
  color: #FF9328;
}

.success-dialog .el-dialog__header {
  border-bottom: 1px solid #E4E7ED;
}

.success-dialog .el-dialog__header .el-dialog__title {
  color: #69C33D;
}

.el-form-item__label {
  text-align: center;
}
</style>
